<template>
	<view class="mineCommunity">
		<app-title text='我的社区' titleBackground='rgba(0,0,0,0)' color='#fff'></app-title>

		<view class="mineCommunity_box">
			<view class="mineCommunity_box_scroll">
				<view class="mineCommunity_box_scroll_top">
					<view class="member_box_top_user">
						<view class="member_box_top_user_image">
							<image :src="res.avatar?res.avatar:'../../static/member/default_avatar.png'" mode="">
							</image>
						</view>
						<view class="member_box_top_user_Information">
							<view class="member_box_top_user_Information_name">
								{{res?res.realname:"****同学"}}
							</view>
							<span class="member_box_top_user_Information_Level">
								{{res?res.new_level_name:'普通用户'}}
							</span>
							<!-- <view class="" v-else>
								<image style="width: 150rpx;" :src="res.levelname" mode="widthFix"></image>
							</view> -->
						</view>
						<view class="member_box_top_user_Information">
							<view class="member_box_top_user_Information_ID">
								ID:{{res.id ? res.id : "000000"}}
							</view>
							<span class="member_box_top_user_Information_Telephone">
								{{res? res.mobile : ''}}
							</span>
						</view>
						<!-- <view class="member_box_top_user_set" v-if="res"
							@click="GoFun('/pages/member/edit_personage_information/edit_personage_information')">
							点击更改
						</view> -->
					</view>
					<view class="member_box_bottom">
						<span>我的业绩</span>
						<p>{{res.zsyj}}</p>
					</view>
				</view>
				<view class="mineCommunity_box_scroll_tab">
					<u-tabs :list="tab" :current='current' :scrollable='false' :activeStyle='{ color: "#FFD489" }'
						:inactiveStyle='{color:"#505050"}' lineColor='#FFD489' lineWidth='35' @change="tabsChange">
					</u-tabs>
				</view>


				<view class="mineCommunity_box_scroll_wodedingdan" v-if="current === 0">
					<view class="mineCommunity_box_scroll_wodedingdan_">
						<view class="mineCommunity_box_scroll_wodedingdan_item">
							<p>总业绩</p>
							<text>{{res.zyj}}</text>
						</view>
						<view class="mineCommunity_box_scroll_wodedingdan_item">
							<p>当日业绩</p>
							<text>{{res.today_yeji}}</text>
						</view>
					</view>
					<view class="mineCommunity_box_scroll_wodedingdan_">
						<view class="mineCommunity_box_scroll_wodedingdan_item">
							<p>会员人数</p>
							<text>{{res.sanxia_suoyou}}</text>
						</view>
						<view class="mineCommunity_box_scroll_wodedingdan_item">
							<p>VIP会员</p>
							<text>{{res.fensi_youxiao}}</text>
						</view>
					</view>
				</view>

				<view class="mineCommunity_box_dictyosome" v-if="current === 0">
					<view class="mineCommunity_box_dictyosome_item" v-for="(item,index) in list" :key="index">
						<view class="mineCommunity_box_dictyosome_item_main">
							<view class="mineCommunity_box_dictyosome_item_main_top">
								<p>
									<span style="color: #FE8703;">{{item.levelname}}</span>
									<span style='padding: 0 20rpx;'>ID&nbsp;{{item.id}}</span>
									<span style="color: #FE8703;">{{item.mobile}}</span>
								</p>
								<image @click.stop="openFun(index)"
									:src="item.isOpen?'../../../static/member/kai.png':'../../../static/member/guan.png'"
									mode="heightFix">
								</image>
							</view>
							<view class="mineCommunity_box_dictyosome_item_main_">
								<view class="mineCommunity_box_dictyosome_item_main_item">
									<p>总业绩</p>
									<span>{{item.zsyj}}</span>
								</view>
								<view class="mineCommunity_box_dictyosome_item_main_item">
									<p>当日业绩</p>
									<span>{{item.today_yeji}}</span>
								</view>
								<view class="mineCommunity_box_dictyosome_item_main_item"
									style="display: flex;justify-content: space-around;flex-direction: row;"
									:style="item.zsyj === 0?'':'color:#6F3D00;'">
									<view style="width: 30rpx;height: 30rpx;border-radius: 30rpx;"
										:style="item.zsyj === 0?'border:1rpx solid #ccc;':'background-color:#6F3D00;'">
									</view>
									{{item.zsyj === 0?'本人未下单':'本人已下单'}}
								</view>
							</view>
							<view class="mineCommunity_box_dictyosome_item_main_">
								<view class="mineCommunity_box_dictyosome_item_main_item">
									<p>普通会员</p>
									<span>{{item.wx_num}}人</span>
								</view>
								<view class="mineCommunity_box_dictyosome_item_main_item">
									<p>VIP会员</p>
									<span>{{item.yx_num}}人</span>
								</view>
								<view class="mineCommunity_box_dictyosome_item_main_item">
									<p>本人消费</p>
									<span>{{item.zsyj}}</span>
								</view>
							</view>
						</view>
						<view class="mineCommunity_box_dictyosome_item_null"
							v-if="item.ChildList.length === 0 && item.isOpen">
							暂无数据
						</view>
						<view class="mineCommunity_box_dictyosome_item_Child"
							v-if="item.ChildList.length !== 0 && item.isOpen">
							<view class="mineCommunity_box_dictyosome_item_main" style="margin: 20rpx 0;"
								v-for="(items,indexs) in item.ChildList" :key="indexs">
								<view class="mineCommunity_box_dictyosome_item_main_top">
									<p>
										<span style="color: #FE8703;">{{items.levelname}}</span>
										<span style='padding: 0 20rpx;'>ID&nbsp;{{items.id}}</span>
										<span style="color: #FE8703;">{{items.mobile}}</span>
									</p>
								</view>
								<view class="mineCommunity_box_dictyosome_item_main_">
									<view class="mineCommunity_box_dictyosome_item_main_item">
										<p>总业绩</p>
										<span>{{items.zsyj}}</span>
									</view>
									<view class="mineCommunity_box_dictyosome_item_main_item">
										<p>当日业绩</p>
										<span>{{items.today_yeji}}</span>
									</view>
									<view class="mineCommunity_box_dictyosome_item_main_item"
										style="display: flex;justify-content: space-around;flex-direction: row;"
										:style="items.zsyj === 0?'':'color:#6F3D00;'">
										<view style="width: 30rpx;height: 30rpx;border-radius: 30rpx;"
											:style="items.zsyj === 0?'border:1rpx solid #ccc;':'background-color:#6F3D00;'">
										</view>
										{{items.zsyj === 0?'本人未下单':'本人已下单'}}
									</view>
								</view>
								<view class="mineCommunity_box_dictyosome_item_main_">
									<view class="mineCommunity_box_dictyosome_item_main_item">
										<p>普通会员</p>
										<span>{{items.wx_num}}人</span>
									</view>
									<view class="mineCommunity_box_dictyosome_item_main_item">
										<p>VIP会员</p>
										<span>{{items.yx_num}}人</span>
									</view>
									<view class="mineCommunity_box_dictyosome_item_main_item">
										<p>本人消费</p>
										<span>{{items.zsyj}}</span>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>



				<view class="mineCommunity_box_scroll_yeji" v-if="current === 1">
					<view class="mineCommunity_box_scroll_yeji_box">
						<view class="mineCommunity_box_scroll_yeji_box_title">
							业绩统计
						</view>
						<view class="mineCommunity_box_scroll_yeji_box_item">
							<p>当日业绩</p>
							<span>{{ress.tody_yj}}</span>
						</view>
						<view class="mineCommunity_box_scroll_yeji_box_item">
							<p>七天内业绩</p>
							<span>{{ress.seven_yj}}</span>
						</view>
						<view class="mineCommunity_box_scroll_yeji_box_item">
							<p>当月业绩</p>
							<span>{{ress.month_yj}}</span>
						</view>
						<view class="mineCommunity_box_scroll_yeji_box_item">
							<p>总业绩</p>
							<span>{{ress.all_yj}}</span>
						</view>
					</view>
					<view class="mineCommunity_box_scroll_yeji_box">
						<view class="mineCommunity_box_scroll_yeji_box_title">
							奖励统计
						</view>
						<view class="mineCommunity_box_scroll_yeji_box_item">
							<p>当日奖励</p>
							<span>{{ress.tody_jl }}</span>
						</view>
						<view class="mineCommunity_box_scroll_yeji_box_item">
							<p>七天内奖励</p>
							<span>{{ress.seven_jl}}</span>
						</view>
						<view class="mineCommunity_box_scroll_yeji_box_item">
							<p>当月奖励</p>
							<span>{{ress.month_jl}}</span>
						</view>
						<view class="mineCommunity_box_scroll_yeji_box_item">
							<p>总奖励</p>
							<span>{{ress.all_jl}}</span>
						</view>
					</view>
				</view>


				<view class="mineCommunity_box_scroll_sousuo" v-if="current === 2">
					<uni-datetime-picker v-model="range" type="daterange" @change="maskChangeFun" />
					<view class="mineCommunity_box_scroll_yeji_box" style="margin: 20rpx 0;" v-if="resss !== ''">
						<view class="mineCommunity_box_scroll_yeji_box_item">
							<p>业绩</p>
							<span>{{resss.all_yj }}</span>
						</view>
						<view class="mineCommunity_box_scroll_yeji_box_item">
							<p>奖励</p>
							<span>{{resss.all_jl }}</span>
						</view>
					</view>
				</view>



			</view>
		</view>
	</view>
</template>

<script>
	import {
		member,
		member_mycommunity,
		api_index_get_branch_office_data,
		api_index_time_select
	} from "@/api/member.js";

	export default {
		data() {
			return {
				openid: '',
				res: '',
				ress: '',
				resss: '',
				list: [],
				range: [],
				tab: [{
					name: '我的业绩',
					type: 1
				}, {
					name: '数据统计',
					type: 2
				}, {
					name: '查询统计',
					type: 3
				}],
				current: 0,
				tabISshow: false
			};
		},
		onShow() {
			this.list = [];
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.member_mycommunityFun();
					this.api_index_get_branch_office_dataFun();
				},
				fail: () => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});
		},
		methods: {
			maskChangeFun(e) {
				if (e.length === 0) {
					this.resss = ''
					return
				}
				this.range = [];
				e.forEach(item => {
					let time = Date.parse(item);
					this.range.push(time / 1000)
				})
				this.api_index_time_selectFun();
			},
			async api_index_time_selectFun() {
				let up = {
					openid: this.openid,
					start_time: this.range[0], //开始时间
					end_time: this.range[1] //结束时间
				}
				let data = await api_index_time_select(up);
				console.log(data);
				this.resss = data;
			},
			async api_index_get_branch_office_dataFun() {
				let data = await api_index_get_branch_office_data(this.openid);
				this.ress = data;
				if (data.error === 0) {
					this.tabISshow = true;
				}
			},
			tabsChange(e) {
				console.log(e.index);
				this.current = e.index;
			},
			openFun(i) {
				this.list[i].isOpen = !this.list[i].isOpen;
				console.log(this.list);
				if (this.list[i].ChildList.length === 0) {
					this.member_mycommunityFun(this.list[i].openid, i)
				}
			},
			async member_mycommunityFun(openid = '', i) {
				let up = {
					openid: openid === '' ? this.openid : openid
				}
				let data = await member_mycommunity(up);
				if (typeof(data) === "string") {
					return
				}
				if (openid === '' && data.user_list.length !== 0) {
					this.res = data;
					data.user_list.forEach(i => {
						let obj = {
							createtime: i.createtime,
							id: i.id,
							is_open: i.is_open,
							level: i.level,
							levelname: i.levelname,
							mobile: i.mobile,
							openid: i.openid,
							realname: i.realname,
							time: i.time,
							today_yeji: i.today_yeji,
							wx_num: i.wx_num,
							yeji: i.yeji,
							yx_num: i.yx_num,
							zsyj: i.zsyj,
							zyj: i.zyj,
							ChildList: [],
							isOpen: false
						}
						this.list.push(obj)
					})
				} else {
					data.user_list.forEach(item => {
						this.list[i].ChildList.push(item);
					})
				}
			},
			backFun() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.mineCommunity {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		// background-color: #fff;
		background-image: url('@/static/member/memberTopss.png');
		background-repeat: no-repeat;
		background-size: 100% calc(88rpx + var(--status-bar-height));

		.mineCommunity_box {
			width: 100%;
			flex: 1;
			overflow-y: auto;
			// background-color: #F0EDF8;

			.mineCommunity_box_scroll {
				width: 100%;
				// height: 200vh;
				// background-repeat: no-repeat;
				// background-size: 100% 400rpx;

				.mineCommunity_box_scroll_top {
					width: 100%;
					height: 304rpx;
					// background-color: #1A1513;
					background-image: url('@/static/member/memberTopss.png');
					display: flex;
					// align-items: flex-end;
					flex-direction: column;
					padding: 30rpx 50rpx;

					.member_box_top_user {
						width: 100%;
						height: 60%;
						// padding: 0 40rpx;
						padding-top: 20rpx;
						display: flex;
						position: relative;

						.member_box_top_user_image {
							width: 133rpx;
							height: 133rpx;
							margin-right: 40rpx;
							border-radius: 100rpx;
							overflow: hidden;
							background-color: #fff;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.member_box_top_user_Information {
							width: 240rpx;
							height: 100%;
							color: #fff;
							// padding: 18rpx 0;
							font-size: 30rpx;

							.member_box_top_user_Information_name {
								font-size: 40rpx;
								font-weight: 500;
								margin-bottom: 15rpx;
								height: 52rpx;
								text-wrap: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.member_box_top_user_Information_ID {
								height: 52rpx;
								margin-bottom: 15rpx;
							}


							.member_box_top_user_Information_Level {
								// padding: 5rpx 30rpx;
								width: 168rpx;
								border: 2rpx solid #fff;
								border-radius: 100rpx;
								display: inline-block;
								max-width: 100%;
								text-wrap: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								text-align: center;
								font-size: 22rpx;
							}
						}

						.member_box_top_user_set {
							position: absolute;
							bottom: -30rpx;
							font-size: 20rpx;
							color: #fff;
							left: 65rpx;
							z-index: 1000;
						}
					}

					.member_box_bottom {
						color: #FFF;
						display: flex;
						align-items: baseline;
						padding: 0 0 0 168rpx;

						span {
							padding-right: 20rpx;
						}

						p {
							font-size: 60rpx;
							flex: 1;
							text-overflow: ellipsis;
							text-wrap: nowrap;
							overflow: hidden;
						}
					}

					.mineCommunity_box_scroll_top_centrer {
						width: 100%;
						height: 130rpx;
						display: flex;
						align-items: flex-end;
						color: #fff;

						.mineCommunity_box_scroll_top_centrer_image {
							width: 122rpx;
							height: 122rpx;
							border-radius: 122rpx;
							// background-color: #fff;
						}

						.mineCommunity_box_scroll_top_centrer_xinxis {
							flex: 1;
							height: 80%;
							display: flex;
							align-items: flex-end;
							padding-left: 20rpx;


							p {
								padding-left: 10rpx;
								font-size: 68rpx;
							}
						}

						.mineCommunity_box_scroll_top_centrer_xinxi {
							height: 100%;
							display: flex;
							flex-direction: column;
							padding-left: 20rpx;
							justify-content: flex-end;
							color: #fff;

							p {
								font-size: 28rpx;

							}

							.mineCommunity_box_scroll_top_centrer_xinxi_dengji {
								width: 176rpx;
								height: 44rpx;
								border-radius: 44rpx;
								background-color: rgba(255, 255, 255, .6);
								margin-top: 18rpx;
								font-size: 28rpx;
								text-align: center;
								position: relative;

								.mineCommunity_box_scroll_top_centrer_xinxi_dengji_img {
									width: 36rpx;
									height: 36rpx;
									position: absolute;
									top: 3rpx;
									left: 10rpx;
									border-radius: 30rpx;
								}
							}
						}

						.mineCommunity_box_scroll_top_centrer_id {
							font-size: 28rpx;
							padding-left: 20rpx;
						}
					}
				}

				.mineCommunity_box_scroll_tab {
					width: 100%;
					background-color: #fff;
					box-shadow: 0 4rpx 20rpx #ccc;
				}

				.mineCommunity_box_scroll_wodedingdan {
					width: 700rpx;
					height: 230rpx;
					margin: 42rpx auto;
					background-color: #fff;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					box-shadow: 0 0 20rpx #ccc;

					.mineCommunity_box_scroll_wodedingdan_ {
						display: flex;
						width: 100%;
						height: 50%;
						justify-content: space-around;
						align-items: center;

						.mineCommunity_box_scroll_wodedingdan_item {
							width: 200rpx;
							text-align: center;
							color: #505050;
							font-size: 28rpx;
						}
					}
				}

				.mineCommunity_box_dictyosome {
					width: 700rpx;
					margin: 0 auto;
					// padding: 20rpx;

					.mineCommunity_box_dictyosome_item {
						width: 100%;
						min-height: 287rpx;
						margin-bottom: 40rpx;

						.mineCommunity_box_dictyosome_item_main {
							width: 100%;
							height: 300rpx;
							// margin: 20rpx 0;
							background-color: #fff;
							border-radius: 20rpx;
							box-shadow: 0 0 20rpx #ccc;

							.mineCommunity_box_dictyosome_item_main_top {
								width: 100%;
								height: 100rpx;
								display: flex;
								justify-content: space-between;
								padding: 0 30rpx;
								align-items: center;
								color: #1A1513;
								font-size: 26rpx;

								image {
									height: 50rpx;
								}
							}

							.mineCommunity_box_dictyosome_item_main_ {
								width: 100%;
								height: 80rpx;
								display: flex;
								justify-content: space-around;
								align-items: center;

								.mineCommunity_box_dictyosome_item_main_item {
									text-align: center;
									width: 200rpx;
									height: 80%;
									font-size: 26rpx;
									display: flex;
									flex-direction: column;
									justify-content: space-around;

									span {
										color: #FF332E;
									}
								}
							}
						}

						.mineCommunity_box_dictyosome_item_null {
							width: 100%;
							height: 80rpx;
							line-height: 80rpx;

						}
					}
				}


				.mineCommunity_box_scroll_yeji,
				.mineCommunity_box_scroll_sousuo {
					width: 100%;
					padding: 24rpx;

					.mineCommunity_box_scroll_yeji_box {
						width: 100%;

						.mineCommunity_box_scroll_yeji_box_title {
							padding: 0 20rpx;
							margin: 40rpx 0 20rpx 0;
						}

						.mineCommunity_box_scroll_yeji_box_item {
							width: 100%;
							height: 98rpx;
							display: flex;
							align-items: center;
							border: 1rpx solid #CECFD0;
							margin-bottom: 20rpx;
							font-size: 28rpx;

							p {
								width: 200rpx;
								margin-left: 40rpx;
							}

							span {
								color: #FF332E;
							}
						}
					}


				}



			}
		}
	}
</style>